<template>
  <div class="func">
    <div class="func-item" :style="itemStyle" v-for="i in 10" :key="i">
      <img src="@/assets/images/kcmc.png" />
      <span>课程名称</span>
    </div>
  </div>
</template>
<script setup>
import { computed } from "vue";

const props = defineProps({
  col: {
    type: [String, Number],
    default: 5,
  },
});

const itemStyle = computed(() => {
  const { col } = props;
  return {
    width: (100 / col * 1)  + "%",
  };
});
</script>
<style lang="scss" scoped>
.func {
  display: flex;
  flex-wrap: wrap;
  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 12px;
    }
    span {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #676b6b;
      text-align: center;
      padding-top: 8px;
    }
  }
}
</style>